<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>巴中项目demo</title>
    <style>
        body {
            position: absolute;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #mapContainer {
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            float: left;
        }
    </style>
</head>

<body>

    <div id="mapContainer" style="position: relative;">
    </div>

</body>
<script src='/GiswayEngine.js'></script>
<script type="text/javascript">
    var cameraFov = 10; //相机视角
    window.app = new GE.App('mapContainer', {
        geographySystem: 'gcj02',
        // position: [118.76769049871781, 31.828401267358743, 3000],
        // lookAt: [118.76769049871781, 31.828401267358743, 0],

        position: [106.754530, 31.854166, 6000],
        lookAt: [106.754530, 31.854166, 0],


        cameraScrollSpeed: 15,
        minZoom: 3,
        maxZoom: 20,
        cameraFov: cameraFov, //相机的fov
        verticalLevel: 6,
        maxSlopeAngle: 70,

        ambientLightIntensity: 2,
        ambientLightcolor: 0xffffff,//环境光照的颜色
        ambientLightType: 'ambient',//环境光照的类型，有如下类型:ambient，hemisphere
        supportLightType: 'single',//方向光的类型，有如下类型:single，double，tripple
        supportLightIntensity: 1,//方向光的强度
        supportLightcolor: '#ffffff', //方向光的颜色
        lightDistance: 2000,//方向光源距离初始相机target的距离
        lightHeight: 50,//方向光源的高度

        // extraStep: 5,
        patchLoadCount: 7,
        useCarpet: true,
        background: "Fog",
        // backGroundColor: "#A9A9A9",
        useDefaultTexture: false, //是否使用瓦片默认纹理
        isOpenCircleRange: true, //开启圆形范围可视化
        baseLayer: [
            {
                url: 'https://webst03.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
                readableUrl: true,
                tileType: 'image', //图层的类型
                name: 'imageLayer', //图层的名字
                maxDataLevel: 16,
                colorSpace: 'srgb', //'', 
                isBackgroundLayer: true, //该图层是否作为地图的背景图层，一般背景图层都放在所有图层的最下面
                canNotSelect: true, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
            }
        ]
    });

    //加载倾斜摄影数据
    function add3dtiles(url) {
        let threeTileModel = new GE.Tiles3d({
            url: url, refinement: 1000, loadRange: 0,
            // z: -760, //调整数据的高度， 用户可以根据数据做调整，一般情况下如果isCloseGround为true,可以不设置这个参数
            minSize: 500,
            maxSize: 3000,
            maxBytesSize: 0.3 * 2 ** 10,
            minByteSize: 0.2 * 2 ** 10,
            screenErrorFactor: 1.5, //屏幕误差缩放的倍数
            isOpenAdditionalCamera: false, //是否添加预加载的额外相机
            additionCameraFov: cameraFov * 2, //额外相机的fov
            unloadPercent: 1,
            maxJobs: 15,
            canNotSelect: false, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
            isSupportTransparent: false,
            isDoubleSide: false, //是否开启双面渲染
            dracoGltfPath: 'https://gisdata.t-aaron.com/3dTiles/rjy/draco/',
            isCloseGround: true, //是否贴近地面
            z: -220,
            isReplaceMaterial: false,
            isComputeBox: false, //是否计算各个瓦片的包围盒
            isLocate: true,
        });
        app.add(threeTileModel);
    }

    let dataMap = new Map();
    //加载正射影像数据
    function addMap(dataArray) { //urlString, name
        dataArray.forEach(element => {
            let name = element.name;
            let urlString = element.urlString;
            let mapMsg = getMapMsg(urlString);

            let mapConfig = {
                url: urlString,
                readableUrl: true,
                tileType: 'image', //图层的类型
                name: name, //图层的名字
                minDataLevel: 12,
                maxDataLevel: 20,
                colorSpace: 'srgb', //'', 
                isAdditionalLayer: true,
                canNotSelect: true, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
                mapRange: mapMsg.mapRange
            };
            let baseTileMap = app.map.addTileMap(mapConfig);
            if (baseTileMap) {
               
                let label = htmlMarker(name, new GE.Point(mapMsg.long, mapMsg.lat, 0, 'gcj02'));
                baseTileMap['label'] = label;
            }

            dataMap.set(name, urlString);
        });
        app.map.load();

        if (dataArray.length == 1) {
            let nameKeys = dataMap.keys();
            let name = nameKeys.next();
            let urlString = dataMap.get(name.value);
            let mapMsg = getMapMsg(urlString);
            let eyePosition = new GE.Point(mapMsg.long, mapMsg.lat, 6000, "gcj02");
            let target = new GE.Point(mapMsg.long, mapMsg.lat, 0, "gcj02");
            if( mapMsg.mapRange){
                let range = { startPoint: mapMsg.mapRange.leftDownPoint, endPoint: mapMsg.mapRange.rightUpPoint };
                app.camera.setVisualScope(range);
            }else{
                app.camera.flyTo(eyePosition, target, 0);
            }
           
        }
    }

    function removeMap(name) {
        dataMap.delete(name);
        let baseTileMap = app.map.getTileMap('image', name);
        let label = baseTileMap['label'];
        if(label){
            label.dispose();
        }
        app.map.removeTileMap('image', name);
    }

    function htmlMarker(name, circelCenterPoint) {
        // 创建一个容器div，用于同时容纳机场图标和名称标签
        let containerDiv = document.createElement('div')
        containerDiv.style.position = 'relative'

        // 这里我们需要调整一下，不再使用固定宽高
        // containerDiv.style.width = '120px';
        // containerDiv.style.height = '50px';

        // 设置为不拦截鼠标事件，使点击可以穿透到下层元素
        // containerDiv.style.pointerEvents = 'none'
        // 设置较低的z-index，确保编辑元素显示在上层
        containerDiv.style.zIndex = '0'

        // 创建机场图标div
        let airportDiv = document.createElement('div')
        airportDiv.className = 'airport-marker'
        airportDiv.style.position = 'absolute'
        airportDiv.style.left = '0'
        airportDiv.style.top = '0'

        // 固定图标尺寸
        const iconWidth = 40
        const iconHeight = 40
        airportDiv.style.width = iconWidth + 'px'
        airportDiv.style.height = iconHeight + 'px'

        airportDiv.style.backgroundImage =
            "url('https://gisdata.t-aaron.com/3dTiles/rjy/pic/airport.png')"
        airportDiv.style.backgroundSize = 'contain'
        airportDiv.style.backgroundRepeat = 'no-repeat'
        airportDiv.style.backgroundPosition = 'center'

        // 锚定图标位置
        airportDiv.style.marginLeft = -iconWidth / 2 + 'px'
        airportDiv.style.marginTop = -iconHeight + 'px'

        // 设置为不拦截鼠标事件
        airportDiv.style.pointerEvents = 'none'
        containerDiv.appendChild(airportDiv)

        // 创建机场名称标签div
        let nameDiv = document.createElement('div')
        nameDiv.className = 'airport-name'
        nameDiv.textContent = name
        nameDiv.style.position = 'absolute'

        // 调整标签位置，让它位于图标上方
        nameDiv.style.left = '0px' // 从0开始
        nameDiv.style.top = -iconHeight - 25 + 'px' // 位于图标上方
        nameDiv.style.transform = 'translateX(-50%)' // 水平居中

        nameDiv.style.padding = '4px 8px'
        nameDiv.style.backgroundColor = 'rgba(235, 144, 26, 0.8)'
        nameDiv.style.borderRadius = '4px'
        nameDiv.style.color = '#000'
        nameDiv.style.fontSize = '14px'
        nameDiv.style.fontWeight = 'bold'
        nameDiv.style.whiteSpace = 'nowrap'
        // 设置为不拦截鼠标事件
        nameDiv.style.pointerEvents = 'none'
        containerDiv.appendChild(nameDiv)
        let targetPosition = circelCenterPoint.clone();

        // 创建HTML标记并设置位置 - 直接使用保存的原始Point对象
        let marker = new GE.HtmlMarker(containerDiv, {
            position: circelCenterPoint,
            isCollisionCheck: false,
            // 设置为不拦截鼠标事件
            // pointerEvents: 'none'
        })

        // 设置对齐方式，改为中心对齐（像ParseLayer.js中那样）
        marker.center.set(0, 0) // 使用(0,0)进行中心对齐

        // 添加到场景
        app.add(marker)

        return marker
    }

    function getMapMsg(urlString) {
        // 解析URL
        const url = new URL(urlString);
        const params = new URLSearchParams(url.search);

        // 提取参数值
        let longValue = Number(params.get('long'));
        let latValue = Number(params.get('lat'));

        let leftPoint;
        let rightPoint;
        try {
             let leftPointMsg = params.get('leftDownPoint').split(',');
             leftPoint = new GE.Point(Number(leftPointMsg[0]), Number(leftPointMsg[1]), 0, 'gcj02');

            let rightPointMsg = params.get('rightUpPoint').split(',');
            rightPoint = new GE.Point(Number(rightPointMsg[0]), Number(rightPointMsg[1]), 0, 'gcj02');

             return { long: longValue, lat: latValue, mapRange: {leftDownPoint: leftPoint, rightUpPoint: rightPoint} };
        } catch (error) {
            console.log(error)
        }
       
        return { long: longValue, lat: latValue};
    }

    window.app.on('Click', function (e) {
        console.log(e);
    });

    //加载倾斜摄影数据
    // add3dtiles('https://bazhong.jouavcloud.com:6089/3dtiles/bahe3Dtiles/tileset.json');
    // add3dtiles('https://bazhong.jouavcloud.com:6089/3dtiles/3dtiles0617/tileset.json');
    //add3dtiles('https://bazhong.jouavcloud.com:6089/3dtiles/3dtiles0609/tileset.json');

    //加载正射影像数据
    // addMap('http://117.172.141.173:5089/geoserver/gwc/service/wmts?layer=BZDOM:PSX-DOM-togcj&style=&tilematrixset=EPSG:900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:900913:{z}&TileCol={x}&TileRow={y}');
    // addMap('https://bazhong.jouavcloud.com:6089/geoserver/gwc/service/wmts?layer=BZDOM:baheDOMGcj02&style=&tilematrixset=EPSG:900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:900913:{z}&TileCol={x}&TileRow={y}');
    let mapDataArray = [];
    let mapUrl = 'https://bazhongfeifu.com:6089/geoserver/gwc/service/wmts?layer=BZDOM:0616_DOMgcj02&style=&tilematrixset=EPSG:900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:900913:{z}&TileCol={x}&TileRow={y}&leftDownPoint=106.77557498694472,31.833694467671393&rightUpPoint=106.84396740917417,31.85614411524445&long=106.80840&lat=31.84851';
    let mapName = '巴州区气象站黄家沟20250616-1';
    mapDataArray.push({ urlString: mapUrl, name: mapName });

    let mapUrl2 = 'https://bazhongfeifu.com:6089/geoserver/gwc/service/wmts?layer=BZSHP:Bz617gcj2&style=&tilematrixset=EPSG:900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:900913:{z}&TileCol={x}&TileRow={y}&leftDownPoint=106.75813553217948,31.81851461850253&rightUpPoint=106.78497279786416,31.848048310243122&long=106.769273&lat=31.833446'
    let mapName2 = '巴州区气象站气象测绘20250617-1';
    mapDataArray.push({ urlString: mapUrl2, name: mapName2 });

    let mapUrl3 = 'https://bazhongfeifu.com:6089/geoserver/gwc/service/wmts?layer=BZDOM:baheDOMGcj02&style=&tilematrixset=EPSG:900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:900913:{z}&TileCol={x}&TileRow={y}&leftDownPoint=106.73664757864829,31.81656001428799&rightUpPoint=106.77717572226028,31.89653645403999&long=106.755536&lat=31.853915'
    let mapName3 = '巴州区河道正射影像-20250612-1';
    mapDataArray.push({ urlString: mapUrl3, name: mapName3 });

    let mapUrl4 = 'https://bazhongfeifu.com:6089/geoserver/gwc/service/wmts?layer=BZSHP:BZ-GCJ2&style=&tilematrixset=EPSG:900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:900913:{z}&TileCol={x}&TileRow={y}&leftDownPoint=106.73677641988183,31.823797964121436&rightUpPoint=106.7777169854001,31.89482482363552&long=106.754530&lat=31.854166'
    let mapName4 = '巴州区河道正射影像-20250612-1';
    mapDataArray.push({ urlString: mapUrl4, name: mapName4 });

    // let mapUrl5 = 'https://bazhong.jouavcloud.com:6089/geoserver/gwc/service/wmts?layer=BZDOM:baheDOMGcj02&style=&tilematrixset=EPSG:900913&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:900913:{z}&TileCol={x}&TileRow={y}&leftDownPoint=106.73664757864829,31.81656001428799&rightUpPoint=106.77717572226028,31.89653645403999&long=106.755536&lat=31.853915'
    // let mapName5 = '巴中地图4';
    // mapDataArray.push({ urlString: mapUrl5, name: mapName5 });

    // for(let i=0; i<10; i++){
    //     let curMapUrrl = 'http://localhost:9009/examples/resources/正射地形'+i+'/output/{z}/{x}/{y}.png?long=118.70929455757143&lat=31.810619115878577';
    //     let curMapName = ''+i;
    //     mapDataArray.push({ urlString: curMapUrrl, name: curMapName });
    // }

    addMap(mapDataArray);
    //removeMap('巴中地图2');
</script>

</html>